<template>
    <div class="common-layout">
        <el-table :data="state.data" height="900" 
        :cell-class-name="tableCellClassName"
        @sort-change="sortChange"
        @cell-click="cellClick"
        :default-sort="state.sort"
        style="width: 100%">
            <el-table-column prop="date" label="date" width="120" sortable/>
            <el-table-column prop="week" label="星期" width="80" />
            <el-table-column prop="stock" label="股票" width="130" />
            <el-table-column prop="industry" label="行业"  sortable width="160" />
            <el-table-column prop="pic" label="pic" width="100"/>
            <el-table-column prop="type" label="type" width="120"/>
            <el-table-column prop="tag" label="tag" width="130" />
            <el-table-column prop="introduce" label="描述" width="300" show-overflow-tooltip/>
            <el-table-column prop="extra" label="补充说明" width="300" show-overflow-tooltip/>
            <el-table-column prop="op" label="OP" width="200"/>
        </el-table>
    </div>
</template>

<script setup>
import { computed, reactive } from 'vue';
import { getSessionStorage, setSessionStorage } from '@/utils/help';
import { getDailyLogData } from '../../service/operation';
import { useRouteQuery } from '../../utils/useRoute';

const baseKey = "DailyLog"
const selectKey = baseKey + "Select"
const sortPropKey = baseKey + "SortProp"
const sortOrderKey = baseKey + "SortOrder"

class OperationSta { 
    rawData
    operationSelected
    operationSelectedStock
    data
    selected
    sort
}

let op = new OperationSta()
op.selected = getSessionStorage(selectKey) || '全部'
op.sort = {
    prop: getSessionStorage(sortPropKey) || 'date',
    order: getSessionStorage(sortOrderKey) || 'descending'
}

const state = reactive(op)

let pic = useRouteQuery("pic", 0)
let tag = useRouteQuery("tag", "")

const loadData = () => {
    getDailyLogData(state.operationSelectedStock).then( res => {
        state.rawData = res.data
        if (pic == 1) {
            state.rawData = state.rawData.filter(item => item.pic == 1)
        }
        if (tag != "") {
            state.rawData = state.rawData.filter(item => item.tag && item.tag.includes(tag))
        }

        state.data = state.rawData
    })
}

loadData()

const sortChange = (column, prop, order) => {
    setSessionStorage(sortPropKey, column.prop)
    setSessionStorage(sortOrderKey, column.order)
}

const cellClick = (row, column, cell, event) => {
    var columnProperty = column.property
    let val = row[columnProperty]

    if (['op','date','type','industry'].includes(columnProperty)) {
        if (state.operationSelected != "" && state.operationSelected == val) {
            state.operationSelected = ""
            state.data = state.rawData
        } else {
            state.operationSelected = val
            state.data = state.rawData.filter(item => item[columnProperty] == val)
        }
    }

    if (columnProperty == "stock") { 
        if (state.operationSelectedStock != "" && state.operationSelectedStock == val){
            state.operationSelectedStock = ""
        } else {
            state.operationSelectedStock = val
        }
        loadData()
    }

    if (columnProperty == "pic") { 
        if(val == 1) {
            let path = "/stocks/" + row.stock + "_" + row.date + ".png"
            window.open("http://localhost:9000" + path);
        }
    }
}


const tableCellClassName = ({row, column, rowIndex, columnIndex}) => {
    var columnProperty = column.property
    var v = row[columnProperty]

    if (!v) {
        return ''
    }

    if (columnProperty == "type") {
        if (v.includes("DOWN")) {
            return 'lt0-cell'
        }
        if (v.includes("UP")) {
            return 'd300up-cell'
        }
        if (v == "新高") {
            return 'lpgt99-cell'
        }
    }

    if (columnProperty == "pic") {
        if (v == 1) {
            return 'd300up-cell'
        }
    }

    if (columnProperty == "extra") {
        if (v.includes("跌")) {
            return 'lt0-cell'
        }
    }
    return ''
}
</script>

<style>
</style>